<style src="./pay-list.css" scoped></style>
<template>
  <vue-add-pay></vue-add-pay>
  <vue-swap-position></vue-swap-position>
  <div class="list-container">
    <table class="table table-bordered table-hover">
      <caption>付费组合列表</caption>
      <thead>
        <tr>
          <th class="col-xs-2">组合ID</th>
          <th class="col-xs-4">组合名称</th>
          <th class="col-xs-2 text-right">排序</th>
          <th class="col-xs-4"></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="it in payList">
          <td class="col-sm-2">{{it.betaId}}</td>
          <td class="col-sm-4">{{it.name}}</td>
          <td class="col-sm-2 text-right">
            <button v-if="$index !==0 " class="btn btn-sm btn-success" @click="moveUp($index)">上移</button>
            <button v-if="$index !== (payList.length-1)" class="btn btn-sm btn-success" @click="moveDown($index)">下移</button>
            <button class="btn btn-sm" v-if=" $index >= payList.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
          </td>
          <td class="col-sm-4 text-right" id = '{{ $index }}'>
            <a v-link="{ path: '/item/' + it.betaId }" class="btn btn-sm btn-primary">订阅量查询</a>
            <button class="btn btn-sm btn-primary" v-if="it.priority !== 1" @click="recommend(it, 1)">优先推荐</button>
            <button class="btn btn-sm btn-danger" v-if="it.priority === 1" @click="unrecommend(it, 0)">取消推荐</button>
            <vue-modify-pay :item.sync="it"></vue-modify-pay>
            <button class="btn btn-sm btn-danger" @click="deleteAc(it)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <vue-pages :pages.sync="pages" :get-list="searchPay"></vue-pages>
</template>
<script src="./pay-list.js"></script>
